<template>
	<uni-popup ref="popup" :is-mask-click="false">
		<view class="relative">
			<image class="absolute size-32" style="right:0;top:-44px;" src="@/static/svg/icon-close.svg" @click="onClose"></image>
			<view class="radius-12 bg-default px-16 py-24" style="width:calc(100vw - 48px);">
				<view class="text-color-regular text-center fs-16 font-medium mb-37"><text>请选择推广奖励</text></view>
				
				<view v-if="commissionAmt" class="flex justify-between px-16 py-12 radius-8 bg-white text-color-regular fs-12 font-normal leading-22 mb-20" @click="onChange(1)">
					<view class="flex flex-col">
						<text class="fs-14 font-semibold leading-22 mb-8">佣金</text>
					</view>
					<view class="flex item-center">
						<text class="color-primary fs-21 font-semibold leading-22"><text class="fs-14 font-normal">¥</text>{{commissionAmt}}</text>
						<image v-if="checkIndex === 1" class="size-16 ml-12" src="@/static/svg/radio-checked.svg"></image>
						<image v-else class="size-16 ml-12" src="@/static/svg/radio-default.svg"></image>
					</view>
				</view>
				<view v-if="pointsAmt" class="flex justify-between px-16 py-12 radius-8 bg-white text-color-regular fs-12 font-normal leading-22 mb-20" @click="onChange(3)">
					<view class="flex flex-col">
						<text class="fs-14 font-semibold leading-22 mb-8">积分</text>
					</view>
					<view class="flex item-center">
						<text class="color-primary fs-21 font-semibold leading-22">{{pointsAmt}}<text class="fs-14 font-normal">积分</text></text>
						<image v-if="checkIndex === 3" class="size-16 ml-12" src="@/static/svg/radio-checked.svg"></image>
						<image v-else class="size-16 ml-12" src="@/static/svg/radio-default.svg"></image>
					</view>
				</view>
				<view v-if="otherEquity" class="flex justify-between px-16 py-12 radius-8 bg-white text-color-regular fs-12 font-normal leading-22 mb-40" @click="onChange(2)">
					<view class="flex flex-col">
						<text class="fs-14 font-semibold leading-22 mb-8">{{otherEquity}}</text>
					</view>
					<view class="flex">
						<image v-if="checkIndex === 2" class="size-16 ml-12" src="@/static/svg/radio-checked.svg"></image>
						<image v-else class="size-16 ml-12" src="@/static/svg/radio-default.svg"></image>
					</view>
				</view>
				<button class="flex center h-43 radius-8 bg-primary text-white fs-16 font-semibold" @click="onConfirm">选好了~</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup name="PromotionIncentiveDialog">
	import { ref, unref } from 'vue'
	
	const props = defineProps({
		commissionAmt: {
			type: [Number, String]
		},
		pointsAmt: {
			type: [Number, String]
		},
		otherEquity: {
			type: String
		}
	})
	
	const emits = defineEmits(['onConfirm', 'onCancel'])
	
	const popup = ref(null)
	
	const onClose = () => {
		popup.value && popup.value.close()
		emits('onCancel')
	}

	const showDialog = (value) => {
		if (value) {
			popup.value && popup.value.open()
		} else {
			popup.value && popup.value.close()
		}
	}
	
	const checkIndex = ref(1)
	
	const onChange = (val) => {
		checkIndex.value = val
	}
	
	const onConfirm = () => {
		emits('onConfirm', unref(checkIndex.value))
		showDialog(false)
	}
	
	defineExpose({
		showDialog
	})
</script>
